<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <title>在线学习系统</title>
  <th:block th:include="common/pub_head :: default"></th:block>
  <th:block th:include="common/pub_head :: layui"></th:block>
  <style>
    .my {
      cursor: pointer;
      text-align: center;
      padding: 10px;
    }

    .my:hover {
      background-color: #ddd;
    }

    .no-file {
      font-size: 40px;
      font-weight: bold;
      color: #ddd;
      text-align: center;
      display: none;
    }
  </style>
</head>
<body style="background-color: #fff">
<div>
  <div style="position: fixed;top: 40%;right: 0">
    <div class="layui-upload-drag my" id="test10">
      <i class="layui-icon"></i>
      <p>上传文件</p>
    </div>
    <div class="my" style="border: 1px solid #ddd;border-style: dotted;padding: 10px"
         onclick="downLoadTemplate()">
      <i class="layui-icon layui-icon-download-circle" style="font-size: 30px; color: #009688;"></i>
      <p style="text-align: center;color: #999">下载模板</p>
    </div>
    <div class="my" style="border: 1px solid #ddd;border-style: dotted;padding: 10px"
         onclick="saveAnswerByFile()">
      <i class="layui-icon layui-icon-ok" style="font-size: 30px; color: #009688;"></i>
      <p style="text-align: center;color: #999">保存</p>
    </div>
  </div>
</div>
<div class="no-file">
  请在右方选入您要分析的文件(doc|docx)
</div>
<iframe id="iframe" width="100%" scrolling="no" frameborder="no" border="0"
        src=""></iframe>
<script>
  /*<![CDATA[*/
  jQuery(function () {
    var src = $("#iframe").attr("src");
    if (src == "") {
      var top = $("#test10").offset().top + 50;
      $(".no-file").attr("style", "margin: " + top + "px auto");
      $(".no-file").show();
    }
  });

  function downLoadTemplate() {
    var url = path + '/answer/downloadTemplate';
    var a = $('<a href="' + url + '"><div></div></a>');
    a.children().click();
  }

  var filePath = "";

  function saveAnswerByFile() {
    if (filePath == "") {
      layer.alert("文件不存在...");

      return;
    }
    var URL = path + "/answer/saveAnswerByFile";
    var formData = {
      filePath: filePath
    };
    $.post(URL, formData, function (jsonData) {
      if (jsonData.flag) {
        layer.alert("保存成功");
        var URL = path + "/answer/study/" + jsonData.answerCardBean.id;
        window.location.href = URL;
      } else {
        layer.alert("保存失败，错误信息为：" + jsonData.errorMsg);
      }
    }, "json");
  }

  layui.use('upload', function () {
    var upload = layui.upload;
    //拖拽上传
    upload.render({
      elem: '#test10'
      , url: path + '/answer/uploadFile'
      , accept: 'file'
      , exts: 'doc|docx',
      before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
        layer.load(); //上传loading
      }
      , done: function (res, index, upload) {
        layer.closeAll();
        if (res.code == "0") {
          var URL = "/answer/lookAnswerByFile?filePath=" + res.filePath;
          $("#iframe").attr("src", URL);
          $(".no-file").hide();
          filePath = res.filePath;
          layer.msg("导入成功", {icon: 1});
        }
      }
    });
  });
  /*]]>*/
</script>
</body>
</html>